
<div id="left" onload="updatePreco()">
    <div id="welcome">
        <h2> CONFIGURE A SUA PIZZA</h2>
        <form name="pizza">
            <h3>Massa</h3>
            <select id="massaSelect" onchange="updatePreco()">
                
                <option value="2">Italiana 2€</option>
                <option value="5">Rolling cheese 5€</option>
                <option value="2">Grossa 2€</option>
            </select>
            <h3>Ingredientes</h3>
            <input type="checkbox" name="ingredientes" value="0.5" onchange="updatePreco()"/>bacon 0.5€ <br />
            <input type="checkbox" name="ingredientes" value="2" onchange="updatePreco()"/>camarao 2€ <br />
            <input type="checkbox" name="ingredientes" value="1" onchange="updatePreco()"/>frango 1€ <br />

            <input type="hidden" id="preco" value="0" />

            <br />
            <button>Guardar Pizza</button>
        </form>
    </div>
</div>
<div id="right">
    <h2>Preco</h2>
    <h3 id="precoPizza" style="color:black">  €</h3>

</div>
<div class="clear"></div>
<script type="text/javascript">
    function updatePreco() {
        
        try{
            ingredientestList = document.getElementsByName("ingredientes");
            var precoIngredientes=0;
        
            for(var i=0;i< ingredientestList.length;i++){
           
                if(ingredientestList[i].checked){
                
                    precoIngredientes=eval(precoIngredientes +'+'+ ingredientestList[i].value);
                }
            }
            document.getElementById("precoPizza").innerHTML= eval(precoIngredientes +' + '+ document.getElementById("massaSelect").value) + ' €';

        }catch(err){
            alert(err);
        }
    }
    
    
</script>
